{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.css' %}" />
    <link rel="stylesheet" href="{% static 'css/sms_login.css' %}" />
  </head>
  <body>
    <div class="box">
      <h2>短信登录</h2>
      <form method="post" id="smsForm" novalidate>
        {% csrf_token %}
        {% for field in form %}
          {% if field.name == 'code' %}
            <div class="form-group">
              <label>短信验证码</label>
              <div class="row">
                <div class="col-xs-7">
                  {{ field }}
                  <span class="rule-check">{{ field.errors.0 }}</span>
                  {% comment %} <input type="text" name="code" id="sms_code" class="form-control" placeholder="短信验证码" /> {% endcomment %}
                </div>
                <div class="col-xs-5">
                  <button type="button" id="sendBtn" class="btn btn-default">发送短信</button>
                </div>
              </div>
              {% comment %} <span class="rule-check">{{ field.errors.0 }}</span> {% endcomment %}
            </div>
          {% else %}
            <div class="form-group">
              <label>{{ field.label }}</label>
              {{ field }}
              <span class="rule-check">{{ field.errors.0 }}</span>
            </div>
          {% endif %}
        {% endfor %}
        <button type="button" class="btn btn-primary" id="loginBtn">登 录</button>
        <a class="user_login" href="{% url 'login' %}">用户名登录</a>
      </form>
    </div>
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'js/csrf.js' %}"></script>
    <script>
      $(function () {
        //当页面框架加载完成后，自动执行里面的代码
        bindSendSmsEvent()
      
        bindLoginEvent()
      })
      //登录部分
      function bindLoginEvent() {
        $('#loginBtn').click(function () {
          // 清楚所有的错误
          $('.rule-check').empty()
          $.ajax({
            url: '{% url "sms_login" %}',
            type: 'POST',
            data: $('#smsForm').serialize(),
            dataType: 'JSON',
            success: function (res) {
              console.log(res)
              if (res.status) {
                //
                location.href = res.data
              } else {
                //{"status": false, "detail": {"mobile": ["手机号格式错误"]}}
                $.each(res.detail, function (k, v) {
                  $('#id_' + k)
                    .next()
                    .text(v[0])
                })
              }
            }
          })
        })
      }
      
      //发送验证码部分
      function bindSendSmsEvent() {
        // 绑定点击事件
        $('#sendBtn').click(function () {
          // 1. 原生的方法获取 手机号
          //const mobileData = parseInt(document.querySelector('#id_mobile').value)
      
          //2.jquery 发放获取手机号
          const mobileData = $('#id_mobile').val()
          const roleData = $('#id_role').val()
      
          // 清楚所有的错误
          $('.rule-check').empty()
      
          // 获取手机号，向后台发短信
          $.ajax({
            url: "{%  url 'sms_send' %}",
            type: 'POST',
            dataType: 'JSON',
            data: { mobile: mobileData, role: roleData },
            success: function (res) {
              console.log(res)
      
              if (res.status) {
                //页面倒计时
                render_timer()
              } else {
                //{"status": false, "detail": {"mobile": ["手机号格式错误"]}}
                $.each(res.detail, function (k, v) {
                  $('#id_' + k)
                    .next()
                    .text(v[0])
                })
              }
            }
          })
      
          // 发送短信的效果函数
        })
      }
      
      // 发送短信后按钮的效果
      function render_timer() {
        //倒计时，动态效果
        var $smsBtn = $('#sendBtn')
      
        //禁用
        $smsBtn.prop('disabled', true)
      
        //改内容
        var time = 60
        var remind = setInterval(function () {
          $smsBtn.text(time + '秒后重新发送')
          time -= 1
          if (time < 0) {
            $smsBtn.text('发送短信')
            $smsBtn.prop('disabled', false)
            clearInterval(remind)
          }
        }, 1000)
      }
    </script>
  </body>
</html>
